<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.引入flexible -->
    <script src="./js/flexible.js"></script>
    <style>
        *{margin: 0; padding: 0;}

        ul,li{ list-style: none; }

        #app{ font-size: 12px;}

        .list{ margin-top: 20px;}

        .item{
            width: 100%;
            display: flex;
            margin-bottom: 15px;
            justify-content: space-around;
        }
        
        .item .item_img{
            width: 20%;
        }
        .item .item_img img{
            width: 100%;
        }
        .item .item_text{
            width: 50%;
        }
        .item_text div{
            margin-bottom: 10px;
            font-size: 13px;
        }
        .item_text .nm{
            font-size: 17px;
            color: #333333;
            font-weight: 700;
        }
        .item_text .sc{
            font-size: 15px;
            color: #faaf00;
            font-weight: 700;
            margin-left: 5px;
        }
        .item .item_btn{
            width: 20%;
            display: flex;
            align-content: center;
        }
        .item .item_btn .btn{
            width: 1.253333rem;
            height: .72rem;
            color: #fff;
            border-radius: 5px;
            line-height: .72rem;
            text-align: center;
        }
        .item .item_btn .gpbtn{
            background:  #f03d37;
        }
        .item .item_btn .ysbtn{
            background: #3c9fe6;
        }

    </style>

</head>
<body>
    <div id="app">
        <ul class="list">
            <li v-for="item in list" :key="item.id" class="item">
                <!-- 这里的图片"item.img"是渲染加载不出来的 地址有w.h，需要数据重组换回图片大小64.90 -->
                <div class="item_img"><img :src="item.img"/></div>
                <div class="item_text">
                    <div class="nm">{{item.nm}}</div>
                    <div>观众评<span class="sc">{{item.sc}}</span></div>
                    <div>主演{{item.star}}</div>
                    <div>{{item.showInfo}}</div>
                </div>
                <div class="item_btn">
                    <div v-if="item.prsShow" class="btn ysbtn">预售</div>
                    <div v-else class="btn gpbtn">购票</div>
                </div>
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            //挂载dom
            el:"#app",
            //挂载后的钩子函数
            mounted(){
                console.log("页面加载时运行该钩子");
                //将数据重组 img图片重组
                this.list.forEach(item =>{
                    item.img = item.img.replace("w.h","64.90");
                })
            },
            //1.引入数据
            data:{
                list:[
                    {
                        "id": 1319075,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/2b709fe7f7c2c9b21c6d37b79e41eb5f1849773.jpg",
                        "version": "",
                        "nm": "守岛人",
                        "preShow": false,
                        "sc": 9.4,
                        "globalReleased": true,
                        "wish": 13057,
                        "star": "刘烨,宫哲,侯勇",
                        "rt": "2021-06-18",
                        "showInfo": "今天137家影院放映441场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1250676,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg",
                        "version": "",
                        "nm": "了不起的老爸",
                        "preShow": false,
                        "sc": 9.3,
                        "globalReleased": true,
                        "wish": 181876,
                        "star": "王砚辉,张宥浩,龚蓓苾",
                        "rt": "2021-06-18",
                        "showInfo": "今天182家影院放映1181场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1360592,
                        "haspromotionTag": false,
                        "img": "http://p1.meituan.net/w.h/movie/17ffdf0c99a3c5ea54552b4e2149aa634124443.jpg",
                        "version": "",
                        "nm": "当男人恋爱时",
                        "preShow": false,
                        "sc": 8.4,
                        "globalReleased": true,
                        "wish": 56474,
                        "star": "邱泽,许玮甯,蔡振南",
                        "rt": "2021-06-11",
                        "showInfo": "今天174家影院放映996场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 644174,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/moviemachine/8d4fd5413b933fdd34e693b7fff5dca7241741.jpg",
                        "version": "",
                        "nm": "黑白魔女库伊拉",
                        "preShow": false,
                        "sc": 9.2,
                        "globalReleased": true,
                        "wish": 39798,
                        "star": "艾玛·斯通,艾玛·汤普森,乔尔·弗莱",
                        "rt": "2021-06-06",
                        "showInfo": "今天165家影院放映717场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1225503,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/49b453507a60d99a9b9d42755950029994987.jpg",
                        "version": "",
                        "nm": "比得兔2：逃跑计划",
                        "preShow": false,
                        "sc": 9.1,
                        "globalReleased": true,
                        "wish": 53317,
                        "star": "郭麒麟,詹姆斯·柯登,萝丝·拜恩",
                        "rt": "2021-06-11",
                        "showInfo": "今天163家影院放映502场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1278598,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/cc08f286aea37c3355fb4bb2441aef3f3457731.jpg",
                        "version": "",
                        "nm": "你好世界",
                        "preShow": false,
                        "sc": 8.9,
                        "globalReleased": true,
                        "wish": 199467,
                        "star": "北村匠海,松坂桃李,滨边美波",
                        "rt": "2021-06-11",
                        "showInfo": "今天149家影院放映387场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1297927,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/348c7eec302fb8006ada81c9d6bfa8dd304463.jpg",
                        "version": "",
                        "nm": "困在时间里的父亲",
                        "preShow": false,
                        "sc": 9.1,
                        "globalReleased": true,
                        "wish": 28385,
                        "star": "安东尼·霍普金斯,奥莉薇娅·柯尔曼,伊莫珍·波茨",
                        "rt": "2021-06-18",
                        "showInfo": "今天60家影院放映300场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1302235,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/movie/487652d6aa8794be39aa956fd77233551990319.jpg",
                        "version": "",
                        "nm": "超越",
                        "preShow": false,
                        "sc": 8.1,
                        "globalReleased": true,
                        "wish": 237013,
                        "star": "郑恺,李昀锐,曹炳琨",
                        "rt": "2021-06-12",
                        "showInfo": "今天150家影院放映451场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1198179,
                        "haspromotionTag": false,
                        "img": "http://p1.meituan.net/w.h/movie/6a0b995daf79a1112aab8fb441f655ff3419929.jpg",
                        "version": "",
                        "nm": "阳光姐妹淘",
                        "preShow": false,
                        "sc": 8.8,
                        "globalReleased": true,
                        "wish": 177876,
                        "star": "殷桃,曾黎,张歆艺",
                        "rt": "2021-06-11",
                        "showInfo": "今天90家影院放映210场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1242151,
                        "haspromotionTag": false,
                        "img": "http://p0.meituan.net/w.h/moviemachine/4f5ecc2cb68afdfce773914c126cb2dd146582.jpg",
                        "version": "v2d imax",
                        "nm": "寂静之地2",
                        "preShow": false,
                        "sc": 7.7,
                        "globalReleased": true,
                        "wish": 59625,
                        "star": "艾米莉·布朗特,希里安·墨菲,米利森特·西蒙兹",
                        "rt": "2021-05-28",
                        "showInfo": "今天119家影院放映270场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 718,
                        "haspromotionTag": false,
                        "img": "http://p1.meituan.net/w.h/movie/b5adcadc67ea24afadc66739bdc9abb33432367.jpg",
                        "version": "",
                        "nm": "天堂电影院",
                        "preShow": false,
                        "sc": 9.3,
                        "globalReleased": true,
                        "wish": 22703,
                        "star": "菲利浦·诺瓦雷,雅克·贝汉,马克·莱昂纳蒂",
                        "rt": "2021-06-11",
                        "showInfo": "今天70家影院放映152场",
                        "showst": 3,
                        "wishst": 0
                    },
                    {
                        "id": 1336183,
                        "haspromotionTag": false,
                        "img": "http://p1.meituan.net/w.h/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg",
                        "version": "v2d imax",
                        "nm": "1921",
                        "preShow": true,
                        "sc": 0,
                        "globalReleased": false,
                        "wish": 247485,
                        "star": "黄轩,倪妮,王仁君",
                        "rt": "2021-07-01",
                        "showInfo": "2021-07-01 下周四上映",
                        "showst": 4,
                        "wishst": 0
                    }
                ]
            }
        })
    </script>
</body>
</html>